<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        /* width: 400px;
        height: 400px;
        border: 1px solid red; */
      }
    </style>
  </head>

  <body>
    <div>
      <div
        id="fzValue"
        style="
          width: 40px;
          height: 40px;
          background-color: red;
          border: 1px solid white;
          color: white;
          font-weight: bold;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        33.5
      </div>
      <div
        id="fzLine"
        style="
          padding-right: 18px;
          border-right: 2px solid white;
          width: 1px;
          height: 40px;
        "
      ></div>
    </div>
    <canvas
      id="box"
      width="200"
      height="200"
      style="border: 1px solid #d3d3d3"
    ></canvas>
    <div
      id="test"
      style="
        width: 500px;
        height: 500px;
        position: absolute;
        top: 300px;
        left: 0;
        border: 1px solid red;
      "
    ></div>
    <canvas id="tc" width="200" height="200"></canvas>
  </body>
  <script>
    var canvas = document.getElementById("box");
    if (canvas && canvas.getContext) {
      //获取对应的CanvasRenderingContext2D对象(画笔)
      var ctx = canvas.getContext("2d");

      //绘制一个以坐标点(100,100)为圆心、半径为150px的圆形
      ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
      //创建一个表示放射性颜色渐变的CanvasGradient对象
      //该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域
      var canvasGradient = ctx.createRadialGradient(100, 100, 10, 100, 100, 60);

      canvasGradient.addColorStop(0, "rgba(255,0,0,0.6)");

      canvasGradient.addColorStop(0.1, "rgba(0,255,0,0.6)");

      canvasGradient.addColorStop(0.4, "rgba(0,0,255,0.6)");

      canvasGradient.addColorStop(0.6, "rgba(0,255,255,0.6)");

      canvasGradient.addColorStop(0.8, "rgba(255,0,255,0.6)");

      canvasGradient.addColorStop(1, "rgba(255,255,0,0.6)");
      //将fillStyle的属性值设为该CanvasGradient对象
      ctx.fillStyle = canvasGradient;
      ctx.fill();
    }

    function heatCanvas() {
      // var canvasList = document.getElementById("test");

      var cvs = document.getElementById("tc");
      // canvasList.appendChild(cvs);

      // cvs.width = 200;
      // cvs.height = 200;

      // if (cvs && cvs.getContext) {
      //获取对应的CanvasRenderingContext2D对象(画笔)
      var ctx = cvs.getContext("2d");

      //绘制一个以坐标点(100,100)为圆心、半径为150px的圆形
      ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
      //创建一个表示放射性颜色渐变的CanvasGradient对象
      //该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域
      var canvasGradient = ctx.createRadialGradient(100, 100, 10, 100, 100, 60);
      //在offset为0的位置(即内圆的圆圈处)添加一个红色的渐变
      canvasGradient.addColorStop(0, "rgba(255,0,0,0.6)");
      //在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个黄色的渐变
      canvasGradient.addColorStop(0.8, "rgba(255,255,0,0.6)");
      //在offset为0的位置(即外圆的圆圈处)添加一个绿色的渐变
      canvasGradient.addColorStop(1, "rgba(0,255,0,0.6)");
      //将fillStyle的属性值设为该CanvasGradient对象
      ctx.fillStyle = canvasGradient;
      ctx.fill();
      console.log(cvs);
      return cvs;
      // }
    }
  </script>
</html>
